Applying Gradients to Text in CSS
You can create visually appealing gradient-colored text in CSS using background-clip and text-fill-color properties along with a background gradient. The gradient is applied to the text instead of the element background.
background: linear-gradient(direction, color1, color2, ...);– Defines the gradient colors and direction.-webkit-background-clip: text;– Clips the background to the shape of the text (required for WebKit browsers).-webkit-text-fill-color: transparent;– Makes the text itself transparent so the gradient shows through.
In this example, the text displays a horizontal gradient from orange to peach. The -webkit-background-clip: text ensures the gradient only fills the letters, and -webkit-text-fill-color: transparent makes the underlying text color transparent to reveal the gradient.
Gradient text requires
background-clip: textand transparent text fill.WebKit prefixes (
-webkit-) are necessary for cross-browser support, though modern browsers are increasingly supporting standard syntax.Combine with
font-weight,font-size, andletter-spacingfor striking typography.Can be layered with text shadows for more depth and visual interest.